<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>房间操作</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="robots" content="all,follow">
  <!-- Bootstrap CSS-->
  <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome CSS-->
  <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
  <!-- Fontastic Custom icon font-->
  <link rel="stylesheet" href="css/fontastic.css">
  <!-- Google fonts - Poppins -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
  <!-- theme stylesheet-->
  <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
  <!-- Custom stylesheet - for your changes-->
  <link rel="stylesheet" href="css/custom.css">
  <!-- Favicon-->
  <link rel="shortcut icon" href="images/favicon.ico">
  <!-- Tweaks for older IEs--><!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
  <!-- JavaScript files-->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/popper.js/umd/popper.min.js"> </script>
  <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
  <script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
  <script src="vendor/jquery-validation/jquery.validate.min.js"></script>

  <!-- Main File-->
  <script src="js/front.js"></script>

  <!-- 公共header js -->
  <script th:include="commons::header_js"> </script>

  <script >
    $(function(){
      /*今天*/
      var time = new Date();
      var day = ("0" + time.getDate()).slice(-2);
      var month = ("0" + (time.getMonth() + 1)).slice(-2);
      var today = time.getFullYear() + "-" + (month) + "-" + (day);
      /*明天*/
      var tomorrowTime = new Date();
      tomorrowTime.setTime(tomorrowTime.getTime()+24*60*60*1000);
      var tomorrowDay = ("0" + tomorrowTime.getDate()).slice(-2);
      var tomorrowMonth = ("0" + (tomorrowTime.getMonth() + 1)).slice(-2);
      var tomorrow = tomorrowTime.getFullYear() + "-" + (tomorrowMonth) + "-" + (tomorrowDay);

      $('#startTime').val(today);
      $('#endTime').val(tomorrow);
      $.ajax({
        url : "check_in/findRoomTypeInfos",
        type : "get",
        success : function(data) {
          var content = "";
          var i = 0;
          for(;i<data.length;i++){
            var po = data[i];
            content += '<option value="'+po.room_type_id+'">'+po.room_type_name+'</option>'
          };
          $('#roomtypesinfo').append(content)
        }
      });
      $.ajax({
        url : "check_in/operateShowRoom",
        type : "get",
        data:{
          room_type_id:$('#roomtypeid').text(),
          room_state:0
        },
        success : function(data) {
          var content = "";
          var i = 0;
          var rooms = data.rooms;
          if(rooms.length!=0){
            for(;i<rooms.length;i++){
              var po = rooms[i];
              content += '<tr>'
                      +'<td width="23%">'+po.room_num+'</td>'
                      +'<td width="30%">'+data.room_type_name+'</td>'
                      +'<td width="30%" id="OrderBookingRoomstate'+po.room_num+'">空闲</td>'
                      +'<td width="17%"><button type="button" class="btn btn-primary" data-toggle="modal"\n' +
                      'data-target="#myModal" style="height: 24px;line-height: 11px;"\n' +
                      'th:onclick="fillinput([[${user_level}]])">\n' +
                      '开单\n' +
                      '</button>\n' +
                      '\n' +
                      '<!-- 模态框 -->\n' +
                      '<div class="modal fade" id="myModal">\n' +
                      '<div class="modal-dialog">\n' +
                      '<div class="modal-content">\n' +
                      '\n' +
                      '<!-- 模态框头部 -->\n' +
                      '<div class="modal-header">\n' +
                      '<h4 class="modal-title">入住人信息</h4>\n' +
                      '<button type="button" class="close" data-dismiss="modal">\n' +
                      '&times;\n' +
                      '</button>\n' +
                      '</div>\n' +
                      '<!-- 模态框主体 -->\n' +
                      '<div class="modal-body">\n' +
                      '姓&nbsp;&nbsp;&nbsp;&nbsp;名：<input type="text" id="actual_name"><br>\n' +
                      '身份证：<input type="text"\n id="id_card"><br>\n' +
                      '</div>\n' +
                      '\n' +
                      '<!-- 模态框底部 -->\n' +
                      '<div class="modal-footer">\n' +
                      '<input type="type" class="btn btn-primary" value="添加" onclick="addinfos('+po.room_num+')">\n' +
                      '<input type="type" class="btn btn-primary" data-dismiss="modal" value="确定" onclick="Booking('+po.room_num+')">\n' +
                      '</div>\n' +
                      '</div>\n' +
                      '</div>\n' +
                      '</div></td>'
                      +'</tr>'
            };
            $('#availablerooms').append(content);
            $('#orderBillingPage').trigger("click");
          }else{
            content += '<span style="width:100%;height: 35px; text-align: center;line-height: 35px;">未选择预定信息</span>';
            $('#checkshowRoominfo').html('');
            $('#noOrderInfo').html(content);
          }
        }
      });
    })
    function addinfos(room_num) {
      $.ajax({
        url : "check_in/addinfos",
        type : "post",
        data:{
          room_num : room_num,
          actual_name:$("#actual_name").val(),
          id_card:$("#id_card").val(),
          order_item_id:$("#order_item_id").text()
        },
        success : function(data) {
          alert(data);
        }

      });
    }
    function Booking(room_num) {
      $.ajax({
        url : "check_in/Booking",
        type : "post",
        data:{
          room_num : room_num,
          actual_name:$("#actual_name").val(),
          id_card:$("#id_card").val(),
          order_item_id:$("#order_item_id").text()
        },
        success : function(data) {
          if(data.result.indexOf('成功')!=-1){
            $('#OrderBookingRoomstate'+data.room_num).html('入住');
          }
          alert(data.result);
        }

      });
    }
    function offlinePay() {
      $.ajax({
        url : "OfflinePay/pay",
        type : "post",
        data:{
          order_id : $('#orderid').text(),
          order_item_id: $('#order_item_id').text()
        },
        success : function(data) {
          alert(data);
          $('#orderitemstate').html('已支付');
          $('#offlinePayOperation').html('<p>收款</p>')
        }

      })
    }
    function checkUserState() {
      $.ajax({
        url : "checkUserState",
        type : "post",
        data:{
          account : $('#userAccount').val()
        },
        success : function(data) {
          $("#checkUserStateResult").text(data.result);
          $("#level_discount").text(data.level_discount);
          $("#user_id").text(data.user_id);
        }

      })
    }
    function offlineShowRooms() {
      $.ajax({
        url : "check_in/offlineShowRooms",
        type : "post",
        data:{
          startTime : $('#startTime').val(),
          endTime : $('#endTime').val(),
          room_type_id : $('#roomtypesinfo option:selected').val(),
          level_discount : $('#level_discount').text(),
          room_state : $('#roomstate option:selected').val(),
          room_type_name : $('#roomtypesinfo option:selected').text()
        },
        success : function(data) {
          if(data.result!=null){
            if(data.result.indexOf("必须大于")!=-1||data.result.indexOf("今天之前")!=-1){
              alert(data.result);
            }
          } else{
            var content = "", i = 0, rooms = data.rooms;
            for(; i<rooms.length; i++){
              var po = rooms[i];
              content += '<tr>'
                      +'<input id="modalRoomNum" hidden="hidden" type="text" value="'+po.room_num+'">'
                      +'<input id="modalPrice" hidden="hidden" type="text" value="'+data.price+'">'
                      +'<td width="12%">'+po.room_num+'</td>'
                      +'<td width="15%">'+data.room_type_name+'</td>'
                      +'<td width="17%">'+data.startTime+'</td>'
                      +'<td width="21%">'+data.endTime+'</td>'
                      +'<td width="10%"><label>¥</label>'+data.price+'<label>元</label></td>'
              if(po.room_state==0){
                content+='<td width="12%" id="roomstate'+po.room_num+'">空闲</td>'
              }else if(po.room_state==1){
                content+='<td width="12%" id="roomstate'+po.room_num+'">入住</td>'
              }else if(po.room_state==2){
                content+=+'<td width="12%" id="roomstate'+po.room_num+'">故障</td>'
              }else if(po.room_state==3){
                content+='<td width="12%" id="roomstate'+po.room_num+'">打扫</td>'
              }
              content+='<td width="8%"><button type="button" class="btn btn-primary" data-toggle="modal"\n' +
                      'data-target="#modal'+po.room_num+'" style="height: 24px;line-height: 11px;"\n' +
                      'th:onclick="fillinput([[${user_level}]])">\n' +
                      '开单\n' +
                      '</button>\n' +
                      '\n' +
                      '<!-- 模态框 -->\n' +
                      '<div class="modal fade" id="modal'+po.room_num+'">\n' +
                      '<div class="modal-dialog">\n' +
                      '<div class="modal-content">\n' +
                      '\n' +
                      '<!-- 模态框头部 -->\n' +
                      '<div class="modal-header">\n' +
                      '<h4 class="modal-title">入住人信息</h4>\n' +
                      '<button type="button" class="close" data-dismiss="modal">\n' +
                      '&times;\n' +
                      '</button>\n' +
                      '</div>\n' +
                      '<!-- 模态框主体 -->\n' +
                      '<div class="modal-body">\n' +
                      '姓&nbsp;&nbsp;&nbsp;&nbsp;名：<input type="text" id="offlineactual_name'+po.room_num+'"><br>\n' +
                      '身份证：<input type="text"\n id="offlineid_card'+po.room_num+'"><br>\n' +
                      '</div>\n' +
                      '\n' +
                      '<!-- 模态框底部 -->\n' +
                      '<div class="modal-footer">\n'+
                      '<input type="submit" class="btn btn-primary" value="添加" onclick="addinfos('+po.room_num+')">\n' +
                      '<input type="submit" class="btn btn-primary" data-dismiss="modal" value="确定" onclick="offlineBooking('+po.room_num+','+data.price+')">\n' +
                      '</div>\n' +
                      '</div>\n' +
                      '</div>\n' +
                      '</div></td>'
                      +'</tr>'
            };
            $('#showroomtable').html(content)
          }
        }
      });
    }
    function offlineBooking(room_num,price) {
      $.ajax({
        url : "check_in/offlineBooking",
        type : "post",
        data:{
          user_id: $("#user_id").text(),
          user_account: $("#userAccount").val(),
          price : price,
          room_type_id : $('#roomtypesinfo option:selected').val(),
          startTime : $('#startTime').val(),
          endTime : $('#endTime').val(),
          room_num : room_num,
          actual_name:$("#offlineactual_name"+room_num).val(),
          id_card:$("#offlineid_card"+room_num).val(),
        },
        success : function(data) {
          if(data.result.indexOf('必须大于')!=-1){

          }else if(data.result.indexOf('成功')!=-1){
            $('#roomstate'+data.room_num).html('入住');
          }
          alert(data.result);
        }
      });
    }
    function checkOut() {
      $.ajax({
        url : "check_in/checkOut",
        type : "post",
        data:{
          room_num: $("#roomNum").val()
        },
        success : function(data) {
          if(data.indexOf('成功')!=-1){
            alert(data);
            $.ajax({
              url : "systemsetting/room/timechangestate",
              type : "post",
              data:{
                room_num: $("#roomNum").val()
              }
            });
          }
        }
      });
    }
  </script>
  <style>
    .operationtext{
      width: 100%;
      height: 50px;
      line-height: 50px;
      background-color: #B8DAFF;
    }
    #selectRooms{
      height: 30px;
      line-height: 30px;
      margin-left: 100px;
      background-color: #B8DAFF;
    }
    #availableroomtable{
      height: 400px;
      overflow: auto;
    }
    #showrooms{
      height: 560px;
      overflow: auto;
    }
  </style>
</head>
<body>
<div class="page">
    <!-- Main Navbar-->
    <header th:include="commons::common_header"></header>


    <div class="page-content d-flex align-items-stretch">
        <!-- 在commons里面，sidebar -->
        <nav th:include="commons::common_sidebar" class="side-navbar"></nav>

        <div class="content-inner">
            <!-- Page Header-->
            <header class="page-header">
                <div class="container-fluid">
                    <h2 class="no-margin-bottom">房间操作</h2>
                </div>
            </header>
      <!-- Page Footer-->
      <div class="container">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist" >
          <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#offlineBilling" id="offlineBillingPage">线下开单</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#orderBilling" id="orderBillingPage">预定开单</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#checkOut" id="checkOutPage">退房</a>
          </li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
          <div id="offlineBilling" class="container tab-pane active">
            <div class="operationtext" style="background-color: #EEF5F9">
              <span class="attributetext">会员查询</span>
              <span class="attributetext" hidden="hidden" id="level_discount"></span>
              <span class="attributetext" hidden="hidden" id="user_id"></span>
              <input type="text" style="height: 30px" id="userAccount">
              <input type="submit" value="确定" onclick="checkUserState()" style="height: 30px;line-height:30px;">
              <span class="attributetext" id="checkUserStateResult"></span>
              <br>
            </div>
            <div class="operationtext" style="background-color: #EEF5F9">
              <span >房间类型</span>
              <select id="roomtypesinfo"></select>
              <span class="attributetext">计划入住时间</span><input type="date" name="data" id="startTime" value="" style="height: 30px">
              <span class="attributetext">计划离店时间</span><input type="date" name="data" id="endTime" value="" style="height: 30px">
              <span>房间状态</span>
              <select id="roomstate">
                <option value="0">空闲</option>
                <option value="1">入住</option>
                <option value="2">故障</option>
                <option value="3">打扫</option>
                <option value="-1" selected="selected">所有</option>
              </select>
              <input type="submit" onclick="offlineShowRooms()" value="查询房间" id="selectRooms">
            </div>
            <div>
            <table class="table table-hover" style="text-align: center">
              <thead class="table-primary">
              <tr style="width: 100%">
                <th>房间号</th>
                <th>房间类型</th>
                <th>计划入住时间</th>
                <th>计划离店时间</th>
                <th>价格</th>
                <th>房间状态</th>
                <th colspan="2">操作</th>
              </tr>
              </thead>
            </table>
            <div id="showrooms">
              <table class="table table-hover" style="text-align: center;">
                <tbody id="showroomtable">
                </tbody>
              </table>
            </div>
            </table>
            </div>
          </div>
          <div id="orderBilling" class="container tab-pane fade"><!--会员设置-->
            <div class="operationtext" style="background-color: #EEF5F9">
              <span >已选择订单</span>
            </div>
            <div>
            <table class="table table-hover" style="text-align: center">
              <thead class="table-primary">
              <tr >
                <th>客户</th>
                <th>联系电话</th>
                <th>订单号</th>
                <th>房间类型</th>
                <th>计划入住时间</th>
                <th>计划离店时间</th>
                <th>订单价格</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr id="noOrderInfo">
                <span th:text="${OrderInfo.order.order_id}" id="orderid" hidden="hidden">订单id</span>
                <span th:text="${OrderInfo.room_type.room_type_id}" id="roomtypeid" hidden="hidden">房间类型id</span>
                <span th:text="${OrderInfo.order_item.order_item_id}" id="order_item_id" hidden="hidden">订单项编号</span>
                <td ><span th:text="${OrderInfo.user.user_name}">无预定信息</span></td>
                <td><span th:text="${OrderInfo.user.user_phone}"></span></td>
                <td><span th:text="${OrderInfo.order.order_num}"></span></td>
                <td><span th:text="${OrderInfo.room_type.room_type_name}"></span></td>
                <td><span th:text="${OrderInfo.order_item.plan_stay_time}"></span></td>
                <td><span th:text="${OrderInfo.order_item.plan_leave_time}"></span></td>
                <td width="130px"><label>¥</label><span th:text="${OrderInfo.order.total_price}"></span><label>元</label></td>
                <td><span th:switch="${OrderInfo.order.order_state}" id="orderitemstate">
                <p th:case=0>未支付</p>
                <p th:case=1>已支付</p>
                <p th:case=2>已取消</p>
                <p th:case=3>已失效</p>
              </span></td>
                <td><span th:switch="${OrderInfo.order.order_state}" id="offlinePayOperation">
                <p th:case=0><input type="submit" value="收款" style="background-color: #B8DAFF" onclick="offlinePay()"></p>
                <p th:case=1>收款</p>
              </span></td>
              </tr>
              </tbody>
            </table>
            </div>
            <div id="checkshowRoominfo">
            <div class="operationtext" style="background-color: #EEF5F9">
              <span >可用房间</span>
            </div>
            <div>
            <table class="table table-hover" style="text-align: center;">
              <thead class="table-primary">
              <tr style="width: 100%">
                <th>房间号</th>
                <th>房间类型</th>
                <th>房间状态</th>
                <th colspan="2">操作</th>
              </tr>
              </thead>
            </table>
            </div>
            <div id="availableroomtable">
              <table class="table table-hover" style="text-align: center;">
                <tbody id="availablerooms" ></tbody>
              </table>
            </div>
            </div>
          </div>
          <div id="checkOut" class="container tab-pane fade">
            <div class="operationtext" style="background-color: #EEF5F9">
              <span class="attributetext">请输入房间号</span>
              <input type="text" style="height: 30px" id="roomNum">
              <input type="submit" value="退房" onclick="checkOut()" style="height: 30px;line-height:30px;">
              <br>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</div>


</body>
</html>